<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="500px"
    style="text-align:center"
  >
    <el-form
      label-width="90px"
      status-icon
      ref="form"
      :model="form"
      :rules="rules"
    >
      <!-- 设备编号 -->
      <el-row>
        <el-col :span="24">
          <el-form-item label="设备编号:">
            <el-input disabled v-model="form.fNumber" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 设备名称 -->
      <el-row>
        <el-col :span="24">
          <el-form-item label="设备名称:">
            <el-input
              placeholder="请输入设备名称"
              v-model="form.fDescription"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 宽度 -->
      <el-row>
        <el-col :span="24">
          <el-form-item label="设备宽度:" prop="fWidth">
            <el-input
              placeholder="请输入设备宽度"
              v-model.number="form.fWidth"
              maxlength="4"
              show-word-limit
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 高度 -->
      <el-row>
        <el-col :span="24">
          <el-form-item label="设备高度:" prop="fHeight">
            <el-input
              placeholder="请输入设备高度"
              v-model.number="form.fHeight"
              maxlength="4"
              show-word-limit
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 类型 -->
      <el-row>
        <el-col :span="24">
          <el-form-item label="设备类型:">
            <el-select
              v-model="form.fType"
              placeholder="请选择设备类型"
              style="width:100%"
            >
              <el-option
                v-for="item in cardTypeOptions"
                :key="item.fType"
                :label="item.fDescription"
                :value="item.fType"
                style="text-indent:1em"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- button -->
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { cardEdit, cardType, singleCard } from '@/api/equipment/list' // 修改设备
export default {
  data () {
    return {
      dialogVisible: false,
      title: undefined,
      cardTypeOptions: [], // 卡号类型信息
      form: {
        fNumber: undefined, // 设备编号
        fWidth: undefined, // 设备宽度
        fHeight: undefined, // 设备高度
        fType: undefined, // 设备类型
        fDescription: undefined // 设备名称
      },
      // 表单校验
      rules: {
        fWidth: [
          { required: true, message: '屏幕宽度不能为空', trigger: 'blur' }
        ],
        fHeight: [
          { required: true, message: '屏幕高度不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 新增或编辑提交
    submitForm () {
      this.$refs.form.validate(async valid => {
        if (!valid) {
          return
        }
        const res = await cardEdit({
          ...this.form
        })
        if (res.code === 200) {
          // 提示
          this.$message.success(res.msg)
          // 关闭dialog对话框
          this.dialogVisible = false
          // 重新渲染表格数据
          this.$emit('dialogEvent')
          // this.$emit('getTree')
        }
      })
    },
    // 卡号类型信息
    async getCardType () {
      const res = await cardType()
      if (res.code === 200) {
        this.cardTypeOptions = res.data
      }
    }
  },
  mounted () {
    this.getCardType()
  },
  watch: {
    // 关闭对话框清空效验
    dialogVisible (newVal, oldVal) {
      if (!newVal) {
        this.$refs.form.resetFields()
        this.form.fDescription = ''
      }
    }
  }
}
</script>
<style lang="scss" scoped></style>
